require(['./config'], () => {
  require(['url', 'template', 'header'], (url, template) => {
    class Category {
      constructor () {
        this.renderList()
        this.renderDr()
        this.renderPage()
        this.search()
        this.sort()
      }
      renderList () {
        // 先从地址栏获取id
        // 根据id去发送请求，获得当前分类的数据来渲染列表
        const id = location.search.slice(4)
        const startIndex = location.hash.indexOf('sort')
        const start = location.hash.slice(7,startIndex-1)
        const sort = location.hash.slice(-1)
        $.get(`${url.xmyxBaseUrl}/tab/${id}`, {start: start,sort: sort}, resp => {
          console.log(resp)
          if (resp.code === 200) {
            const { cname } = resp.data.category
            let { list } = resp.data.items
            list = list.filter(shop => shop.title)
            $('#goodsClassify').html(template('goodsClassifyTemplate', { list }))
            $('#listTitle').html(template('listTitleTemplate',{ cname }))
          }
        })
      }
      renderDr () {
        $.get( "http://quan.lukou.com/api/tabs?sa=", resp1 => {
          if (resp1.code === 200) {
            resp1.data.list = resp1.data.list.slice(1)
            const  { list }  = resp1.data
            $('#giftList').html(template('giftListTemplate', { list }))
          }
        })
      }
      search(){
        $('#searchTxt').on('keydown',function(e){
          if(e.which == 13){
            $('#searchBtn').trigger('click')
          }
        })
        $('#searchBtn').on('click',function(){
          const word = $('#searchTxt').val()
          window.open(`/html/search.html?word=${word}`,'_blank')
        })
      }
      sort(){
        const id = location.search.slice(4)
        const sort = location.hash.slice(-1)
        $('.sort div').eq(sort).addClass('active')
        $('.sort div').on('click',function(){
          window.open(`/html/category.html?id=${id}#start=0&sort=${$(this).index()}`,'_blank')
          window.close()
        })
      }
      renderPage(){
        // 分页
        const id = location.search.slice(4)
        const startIndex = location.hash.indexOf('sort')
        const start = Number(location.hash.slice(7,startIndex-1))
        const sort = location.hash.slice(-1)
        if(start == 0){
          $('#pages').html(`
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" class="active" target="_blank">1</a></li>
          <li><a href="/html/category.html?id=${id}#start=20&sort=${sort}" target="_blank">2</a></li>
          <li><a href="/html/category.html?id=${id}#start=40&sort=${sort}" target="_blank">3</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }else if(start == 20){
          $('#pages').html(`
          <li><button id="lastPageBtn">上一页</button></li>
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" target="_blank">1</a></li>
          <li><a href="/html/category.html?id=${id}#start=20&sort=${sort}" target="_blank" class="active">2</a></li>
          <li><a href="/html/category.html?id=${id}#start=40&sort=${sort}" target="_blank">3</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }else if(start == 40){
          $('#pages').html(`
          <li><button id="lastPageBtn">上一页</button></li>
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" target="_blank">1</a></li>
          <li><a href="/html/category.html?id=${id}#start=20&sort=${sort}" target="_blank">2</a></li>
          <li><a href="/html/category.html?id=${id}#start=40&sort=${sort}" class="active" target="_blank">3</a></li>
          <li><a href="/html/category.html?id=${id}#start=60&sort=${sort}" target="_blank">4</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }else if(start >= 60 && start <= 320){
          $('#pages').html(`
          <li><button id="lastPageBtn">上一页</button></li>
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" target="_blank">1</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=${start - 20}&sort=${sort}" target="_blank">${(start-20)/20}</a></li>
          <li><a href="/html/category.html?id=${id}#start=${start}&sort=${sort}" class="active" target="_blank">${start/20}</a></li>
          <li><a href="/html/category.html?id=${id}#start=${start + 20}&sort=${sort}" target="_blank">${(start+20)/20}</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }else if(start == 340){
          $('#pages').html(`
          <li><button id="lastPageBtn">上一页</button></li>
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" target="_blank">1</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=320&sort=${sort}" target="_blank">17</a></li>
          <li><a href="/html/category.html?id=${id}#start=340&sort=${sort}" class="active" target="_blank">18</a></li>
          <li><a href="/html/category.html?id=${id}#start=360&sort=${sort}" target="_blank">19</a></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }else if(start == 360){
          $('#pages').html(`
          <li><button id="lastPageBtn">上一页</button></li>
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" target="_blank">1</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=340&sort=${sort}" target="_blank">18</a></li>
          <li><a href="/html/category.html?id=${id}#start=360&sort=${sort}" class="active" target="_blank">19</a></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }else if(start == 380){
          $('#pages').html(`
          <li><button id="lastPageBtn">上一页</button></li>
          <li><a href="/html/category.html?id=${id}#start=0&sort=${sort}" target="_blank">1</a></li>
          <li class="nue"><strong>...</strong></li>
          <li><a href="/html/category.html?id=${id}#start=340&sort=${sort}" target="_blank">18</a></li>
          <li><a href="/html/category.html?id=${id}#start=360&sort=${sort}" target="_blank">19</a></li>
          <li><a href="/html/category.html?id=${id}#start=380&sort=${sort}" class="active" target="_blank">20</a></li>
          <li><button id="nextPageBtn">下一页</button></li>
          <li><input type="text" id="turnNum" placeholder="请输入页数"></li>
          <li><button id="turnBtn">跳转</button></li>
          `)
        }
        $('#pages a,#lastPageBtn,#nextPageBtn').on('click',function(){
          window.close()
        })
        if(start != 0){
          $('html,body').animate({ scrollTop: "300" }, 1000)
        }
        // 上一页
        $('#lastPageBtn').on('click',function(){
          window.open(`/html/category.html?id=${id}#start=${start-20}&sort=${sort}`,'_blank')
        })
        // 下一页
        $('#nextPageBtn').on('click',function(){
          window.open(`/html/category.html?id=${id}#start=${start+20}&sort=${sort}`,'_blank')
        })
        // 指定页跳转
        $('#turnNum').on('keydown',function(e){
          if(e.which == 13){
            $('#turnBtn').trigger('click')
          }
        })
        $('#turnBtn').on('click',function(){
          const page = $('#turnNum').val()
          if((/^[1-9]\d*$/.test( page )) && page <= 20){
            window.close()
            window.open(`/html/category.html?id=${id}#start=${(Number(page)-1) * 20}&sort=${sort}`,'_blank')
          }else{
            alert('请输入正确的页数')
          }
        })
      }
    }
    new Category()
  })
})